<nz-list nzItemLayout="vertical">
  @for (item of list$ | async; track item) {
    <nz-list-item nzNoFlex>
      <nz-list-item-meta>
        <nz-list-item-meta-title>
          <a href="{{ item.href }}" target="_blank">{{ item.title }}</a>
        </nz-list-item-meta-title>
        <nz-list-item-meta-description>
          <nz-tag>Alain</nz-tag>
          <nz-tag>ng-zorro-antd</nz-tag>
          <nz-tag>Ant Design</nz-tag>
        </nz-list-item-meta-description>
      </nz-list-item-meta>
      <p>{{ item.content }}</p>
      <div class="mt-md d-flex">
        <nz-avatar [nzSrc]="item.avatar" [nzSize]="'small'" class="mr-sm" />
        <a href="{{ item.href }}" target="_blank">{{ item.owner }}</a>
        <span class="px-sm">发布在</span>
        <a href="{{ item.href }}" target="_blank">{{ item.href }}</a>
        <time class="pl-md text-grey" title="{{ item.updatedAt }}">{{ item.updatedAt | _date }}</time>
      </div>
      <ul nz-list-item-actions>
        <nz-list-item-action> <i nz-icon nzType="star" class="mr-sm"></i>{{ item.star }} </nz-list-item-action>
        <nz-list-item-action><i nz-icon nzType="like" class="mr-sm"></i>{{ item.like }}</nz-list-item-action>
        <nz-list-item-action><i nz-icon nzType="message" class="mr-sm"></i>{{ item.message }}</nz-list-item-action>
      </ul>
    </nz-list-item>
  }
</nz-list>
